<template>
  <page-container>
    <search-form
      v-model="searchForm"
      :searchColumns="searchColumns"
      :searchOptions="{ menuSpan: 8 }"
      @on-search="handleSearch">
      <template v-slot:newBtn>
        <el-button
          type="primary"
          @click="handelAllForm('add')"
          >新增渠道号</el-button
        >
      </template>
    </search-form>

    <avue-table
      :dataList="dataList"
      :loading="loading"
      :page="page"
      :tableColumns="tableColumns"
      :tableOptions="{ menuWidth: 160 }"
      @onPageChange="onPageChange">
      <template v-slot:menu="{ row }">
        <el-button
          type="primary"
          @click="handelAllForm('edit', row)"
          icon="el-icon-edit"
          circle></el-button>
        <el-button
          type="text"
          @click="copy(row)"
          >复制渠道号</el-button
        >
      </template>
    </avue-table>
  </page-container>
</template>

<script>
import store from '@/store'
import tableMixins from '@/mixins/table'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import { queryChannelList, addChannelform, editChannelform } from '@/api/operations'
import { searchColumns, tableColumns, addDialogForm } from './config/table-config'

export default {
  mixins: [tableMixins],
  data() {
    return {
      show: false,
      dataList: [],
      childList: [],
      dialogForm: {},
      searchForm: {
        dateRange: [this.$startStamp(new Date()), this.$endStamp(new Date())],
      },
      editForm: {},
    }
  },
  computed: {
    ...mapGetters(['commonData', 'countryList']),
    userList() {
      return this.commonData?.userList ?? []
    },
    addDialogForm,
    searchColumns,
    tableColumns,
  },
  methods: {
    async getList() {
      this.dataList = []

      const searchParams = this.formatSearch()
      const queryParams = {
        ...searchParams,
        page: this.page.currentPage,
        page_size: this.page.pageSize,
      }
      this.loading = true

      const { data } = await queryChannelList(queryParams)
      this.dataList = data?.list ?? []

      this.page.total = data?.total ?? 0
      this.summaryData = data ?? {}

      this.loading = false
    },
    // 查询参数格式化
    formatSearch() {
      const searchParams = deepClone(this.searchForm)
      const [start, end] = this.searchForm.dateRange
      searchParams.start = start && this.$dayjs(this.$startStamp(start)).unix()
      searchParams.end = end && this.$dayjs(this.$endStamp(end)).unix()
      delete searchParams.dateRange
      return searchParams
    },
    copy(row) {
      this.$Clipboard({
        text: row?.no,
      })
        .then(() => {
          this.$message.success('复制成功')
        })
        .catch(() => {
          this.$message.error('复制失败')
        })
    },
    handelAllForm(type, row) {
      this.show = type === 'add' ? false : true
      this.dialogForm = {}
      if (type === 'edit') {
        this.dialogForm = deepClone(row)
      }
      this.$dialogForm.show({
        width: '50%',
        title: `${type === 'edit' ? '编辑' : '新增'}渠道号`,
        data: this.dialogForm,
        option: {
          span: 24,
          labelWidth: 120,
          column: this.addDialogForm,
        },
        callback: async ({ data, close }) => {
          this.resData = []
          if (type === 'edit') {
            this.resData = await editChannelform(data)
            store.dispatch('app/getChannel')
          } else {
            this.resData = await addChannelform(data)
            store.dispatch('app/getChannel')
          }
          if (this.resData.code === 0) {
            this.$message.success(`${type === 'edit' ? '编辑' : '新增'}成功`)
          }
          this.getList()
          close()
        },
      })
    },
  },
  mounted() {
    this.handleSearch()
  },
}
</script>

<style lang="scss" scoped></style>
